<template>
  <div style="display: flex; align-items: center">
    <div class="programs-number">
      <div
        class="number-info"
        :style="{ 'margin-bottom': index === 0 ? '14px' : '0px' }"
        v-for="(item, index) in collegeData.pointsOfShuo"
      >
        <span style="font-size: 16px; font-weight: 400">{{
          item.disPlayName
        }}</span>
        <span style="color: var(--primary-hover-color); font-weight: 600">{{
          item.number
        }}</span>
      </div>
    </div>
    <div
      class="programs-number"
      style="background: linear-gradient(180deg, #fff6ef, #fff 94%)"
    >
      <div
        class="number-info"
        :style="{ 'margin-bottom': index === 0 ? '14px' : '0px' }"
        v-for="(item, index) in collegeData.pointsOfBo"
        :key="index"
      >
        <span style="font-size: 16px; font-weight: 400">{{
          item.disPlayName
        }}</span>
        <span style="color: var(--warning-color); font-weight: 600">{{
          item.number
        }}</span>
      </div>
    </div>
  </div>
  <div style="position: relative">
    <el-tabs
      v-model="activeName1"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick1"
    >
      <el-tab-pane label="学术硕士" name="programsFirst">
        <div
          class="shuobo-major"
          v-for="(item, index) in data.xs"
          :key="item.code"
        >
          <div class="f-title">
            <span class="title-border"></span>
            <span style="font-size: 18px; font-weight: 500">{{
              item.name
            }}</span>
            <span
              style="
                color: var(--text-secondary-color);
                font-size: 12px;
                margin-left: 2px;
              "
              >({{ item.code }})</span
            >
            <span
              style="
                font-size: 12px;
                color: var(--text-secondary-color);
                margin-left: 15px;
              "
              >{{ item.childCount }}个学科</span
            >
          </div>
          <div
            class="s-content"
            v-for="item1 in item.collegeSBD"
            :key="item1.code"
          >
            <div class="s-title">
              <span style="color: var(--text-primary-color); font-size: 14px">{{
                item1.name
              }}</span>
              <span
                style="color: var(--text-secondary-color); font-size: 12px"
                >{{ item1.code }}</span
              ><span v-if="item1.sbd" style="margin-left: 15px">
                <span class="sbd shuo" v-if="item1.sbd.includes('硕')">硕</span>
                <span class="sbd bo" v-if="item1.sbd.includes('博')">博</span>
              </span>
            </div>
            <div style="display: flex; flex-wrap: wrap">
              <div class="s-box" v-for="item2 in item1.collegeSBD">
                <div class="s-item">
                  <div>
                    <div class="s-item-tip">
                      <span v-if="item2.sbd">
                        <span
                          class="sbd shuo"
                          style="margin: 4px 0 0 4px"
                          v-if="item2.sbd.includes('硕')"
                          >硕</span
                        >
                        <span
                          class="sbd bo"
                          style="margin: 4px 0 0 2px"
                          v-if="item2.sbd.includes('博')"
                          >博</span
                        >
                      </span>
                    </div>
                    <span class="s-item-code">{{ item2.code }}</span>
                  </div>
                  <div
                    style="
                      display: flex;
                      justify-content: center;
                      margin-top: 30px;
                      font-size: 12px;
                    "
                  >
                    <span>{{ item2.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="专业硕士" name="programSsecond">
        <div
          class="shuobo-major"
          v-for="(item, index) in data.zs"
          :key="item.code"
        >
          <div class="f-title">
            <span class="title-border"></span>
            <span style="font-size: 18px; font-weight: 500">{{
              item.name
            }}</span>
            <span
              style="
                color: var(--text-secondary-color);
                font-size: 12px;
                margin-left: 2px;
              "
              >({{ item.code }})</span
            >
            <span
              style="
                font-size: 12px;
                color: var(--text-secondary-color);
                margin-left: 15px;
              "
              >{{ item.childCount }}个学科</span
            >
          </div>
          <div
            class="s-content"
            v-for="item1 in item.collegeSBD"
            :key="item1.code"
          >
            <div class="s-title">
              <span style="color: var(--text-primary-color); font-size: 14px">{{
                item1.name
              }}</span>
              <span
                style="color: var(--text-secondary-color); font-size: 12px"
                >{{ item1.code }}</span
              ><span v-if="item1.sbd" style="margin-left: 15px">
                <span class="sbd shuo" v-if="item1.sbd.includes('硕')">硕</span>
                <span class="sbd bo" v-if="item1.sbd.includes('博')">博</span>
              </span>
            </div>
            <div style="display: flex; flex-wrap: wrap">
              <div class="s-box" v-for="item2 in item1.collegeSBD">
                <div class="s-item">
                  <div>
                    <div class="s-item-tip">
                      <span v-if="item2.sbd">
                        <span
                          class="sbd shuo"
                          style="margin: 4px 0 0 4px"
                          v-if="item2.sbd.includes('硕')"
                          >硕</span
                        >
                        <span
                          class="sbd bo"
                          style="margin: 4px 0 0 2px"
                          v-if="item2.sbd.includes('博')"
                          >博</span
                        >
                      </span>
                    </div>
                    <span class="s-item-code">{{ item2.code }}</span>
                  </div>
                  <div
                    style="
                      display: flex;
                      justify-content: center;
                      margin-top: 30px;
                      font-size: 12px;
                    "
                  >
                    <span>{{ item2.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <span
      style="
        position: absolute;
        right: 0;
        top: 8px;
        z-index: 99;
        font-size: 12px;
        color: #999;
      "
      >以上数据取自官网，以下为该院校部分硕博点专业。更新时间: 2024/11/25</span
    >
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { schoolSbdApi } from '@/modules/InformationBase/api.js';
const { collegeData, collegeCode } = defineProps({
  collegeData: {
    type: Object,
    default: () => {},
  },
  collegeCode: {
    type: String,
  },
});
console.log(11, collegeData);
const data = ref([]);
schoolSbdApi({ collegeCode: collegeCode }).then((res) => {
  res.data.xs.forEach((e) => {
    e.collegeSBD.forEach((i) => {
      e.childCount += i.childCount;
    });
  });
  res.data.zs.forEach((e) => {
    e.collegeSBD.forEach((i) => {
      e.childCount += i.childCount;
    });
  });
  data.value = res.data;
});

const activeName1 = ref('programsFirst');

const handleClick1 = (e) => {
  console.log('e:', e.props.label);
};
</script>

<style lang="scss" scoped>
.programs-number {
  height: 92px;
  margin: 20px 0;
  margin-right: 20px;
  width: 355px;
  padding: 20px;
  border-radius: 7px;
  background: linear-gradient(180deg, #ecf1ff, #fff 97%);
}
.number-info {
  display: flex;
  justify-content: space-between;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.shuobo-major::after {
  content: '';
  margin: 30px 0;
  width: 100%;
  height: 1px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: var(--border-extra-light-color);
  display: block;
}
.f-title {
  height: 18px;
  margin-bottom: 30px;
}
.title-border {
  display: inline-block;
  height: 16px;
  width: 3px;
  margin: 2px 8px 0 0;
  background: var(--primary-color);
}
.s-title {
  height: 14px;
  display: flex;
  -webkit-box-align: end;
  align-items: flex-end;
  margin-top: 16px;
}
.shuo {
  color: #447dff;
  border-color: #5280eb;
  margin-right: 2px;
}
.bo {
  color: var(--warning-color);
  border-color: var(--warning-color);
}
.sbd {
  width: 14px;
  height: 14px;
  display: inline-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-size: 10px;
  border-radius: 2px;
  background: #fff;
  box-sizing: border-box;
  border: 0.5px solid;
}
.s-box {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;
  column-gap: 12px;
  margin: 12px 12px 18px 0;
}
.s-item {
  width: 134px;
  height: 66px;
  border-radius: 4px;
  background: #fafafa;
  position: relative;
  padding: 2px;
  box-sizing: border-box;
}
.s-item-tip {
  position: absolute;
  top: 0;
  left: 0;
  width: 65px;
  height: 22px;
  background: url();
  background-size: 65px 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 2px;
  box-sizing: border-box;
}
.s-item-code {
  position: absolute;
  top: 5px;
  right: 8px;
  height: 12px;
  font-size: 12px;
  line-height: 12px;
  color: var(--text-secondary-color);
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
</style>
